<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path=request.getScheme()+"://"+request.getServerName()+":"+
	request.getServerPort()+request.getContextPath()+"/";
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
    <title>添加医生</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
    <script type="text/javascript" src="../static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <script type="text/javascript" src="../static/js/ckform.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <script type="text/javascript" src="../static/js/ckeditor/ckeditor.js"></script>
 	<script type="text/javascript" src="../static/js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="../static/js/jquery.validate.js"></script>
	<!--消息提示框  -->
    <script type="text/javascript" src="../static/js/coco-message.js"></script>
   
    <script type="text/javascript">
    $(function () {       
		$('#backid').click(function(){
				window.location.href="${path}doctor?method=findDoctorsByPage";
		 });
    });
    </script>
</head>
<body>

<form action="${path }/doctors/add" method="post" class="definewidth m20" id="form-add">
<!-- 	<input type="hidden" name="method" value="insertDoctor"> -->
	
	<table class="table table-bordered table-hover definewidth m10">
	    <tr>
	        <td width="10%" class="tableleft">姓名</td>
	        <td><input type="text" id="doctor-name" name="name" value=""/></td>
	    </tr>
	    
	    <tr>
	        <td width="10%" class="tableleft">身份证号</td>
	        <td><input type="text" name="cardno" value=""/></td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">手机</td>
	        <td><input type="text" name="phone" value=""/></td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">性别</td>
	        <td><input type="radio" name="sex" value="0" checked/>男&nbsp;&nbsp;&nbsp;
	        	<input type="radio" name="sex"  value="1"/>女
        	</td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">出生年月</td>
	        <td>
	        	<input type="text" name="birthday" class="Wdate" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})" value=""/>
        	</td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">年龄</td>
	        <td><input type="text" name="age" value=""/></td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">电子邮箱</td>
	        <td><input type="text" name="email" value=""/></td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">所属科室</td>
	        <td>
	        	<select name="department">
	        		<option value="1">急诊科</option>
	        		<option value="2">儿科</option>
	        		<option value="3">妇科</option>
	        		<option value="4">皮肤科</option>
	        		<option value="5">内分泌科</option>
	        		<option value="6">牙科</option>
	        	</select>
	        </td>
	    </tr>
	    <tr>
	        <td width="10%" class="tableleft">学历</td>
	        <td>
	        	<select name="education">
	        		<option value="1">专科</option>
	        		<option value="2">本科</option>
	        		<option value="3">研究生</option>
	        		<option value="4">博士</option>
	        	</select>
	        </td>
	    </tr>
		<tr>
	        <td width="10%" class="tableleft">备注</td>
	        <td><textarea name="remark"></textarea></td>
		</tr>
	    <tr>
	        <td colspan="2">
				<center>
				<input name="save" id="save" type="button" class="btn btn-primary" value="保存"/>
				 &nbsp;&nbsp;
				 <button type="button" class="btn btn-success" name="backid" id="backid_list">返回列表</button>
				</center>
			</td>
	    </tr>
	</table>
</form>

<script>


//自定义手机号验证
jQuery.validator.addMethod("isPhoneNum", function(value, element) {
  var length = value.length;
  var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
  return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");

/* 表单验证 */
$("#form-add").validate({
	
	onfocusout: function(element) { $(element).valid(); },
	rules:{
		name:{
            required:true
        },
        cardno:{ // 身份证号
            required:true
        },
        phone:{
        	required:true,
        	isPhoneNum:true,
        } ,
        birthday:{	// 生日
        	required:true,
        },
        age:{
        	required:true,
        	number:true
        },
        email:{
        	required:true,
        	email:true
        },
        remark:{
        	required:true
        }
    },
    messages:{
    	name:{
            required:"用户名不能为空"
        },
        cardno:{ // 身份证号
            required:"身份证号不能为空"
        },
        phone:{
        	required:"手机号不能为空",
        	 isPhoneNum:"请填写正确的手机号",
        } ,
        birthday:{	// 生日
        	required:"生日不能为空",
        },
        age:{
        	required:"年龄不能为空",
        	number:"请输入合法的数字"
        },
        email:{
        	required:"邮箱不能为空",
        	email:"请输入合法的邮箱地址"
        },
        remark:{
        	required:"备注不能为空"
        }
    },
    errorElement: "em",
    success: function (succ, element) {
        if (element.name == "name") {
          succ.text("您的名称真好听").addClass("success");
        }
      }
    
});


//
$("#save").click(function(){
	
	var flag = $("#form-add").valid();
	if(!flag){
		alert("请将表单合法填写完。")
	}else{
		var username = $("#doctor-name").val();
		
		if(!checkUserNameIsEqual(username)){ // 用户名和数据库中的重复
			
			alert("亲，您的用户名已经被使用，请换一个好吗?")
			return false;
		}
		
		var data = $("#form-add").serialize();

 		$.ajax({
 			url:"${path}doctors/add",
 			type:"POST",
 			data:data,
 			dataType:"json",
 			success:function(message){
 				if(message.status_code == 200){
 					alert(message.message);
 					window.location.href = "index.jsp"
 				}else{
 					alert(message.message);
 				}

 			}
 		});
		
	}
	
	
});

function checkUserNameIsEqual(username){
	var flag = false;
	
	$.ajax({
		url:"${path}doctors/check?username="+username,
		type:"GET",
		dataType:"json",
		async:false,
		success:function(message){
			console.log(message);
			if(message.status_code == 200){
				console.log("等于200;");
				flag = true;
			}	

		}
	});
	
	console.log("此时flag为："+flag);
	
	return flag;
}

$("#backid_list").click(function(){
	window.location.href = "index.jsp";
});


</script>


</body>
</html>